import { useState } from "react";
import { Canvas, Story, Meta } from "@storybook/addon-docs";
import { Box, Icon, Stack, Text, TextInput } from "metabase/ui";
import { iconNames } from "./icons";

export const args = {
  name: "star",
  size: undefined,
  tooltip: undefined,
};

export const argTypes = {
  name: {
    control: { type: "select" },
    options: iconNames,
  },
  size: {
    control: { type: "number" },
  },
  tooltip: {
    control: { type: "text" },
  },
};

<Meta title="Icons/Icon" component={Icon} args={args} argTypes={argTypes} />

# Icon

Our component wrapper around SVG icons.

## Examples

export const DefaultTemplate = args => {
  return <Icon {...args} />;
};

export const ListTemplate = () => {
  return (
    <Box>
      {iconNames.map(icon => (
        <Box key={icon} display="inline-block" w="100px" m="20px" ta="center">
          <p>{icon}</p>
          <Icon name={icon} />
        </Box>
      ))}
    </Box>
  );
};

export const Default = DefaultTemplate.bind({});

<Canvas>
  <Story name="Default">{Default}</Story>
</Canvas>

### List

export const List = ListTemplate.bind({});

<Canvas>
  <Story name="List">{List}</Story>
</Canvas>
